<template>
  <div class="login-register-container">
    <div class="image-container">
      <!-- 左侧图片区域 -->
      <img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/tg-mj1e9c5d.jpg" alt="">
    </div>
    <div class="login-register-form-container">
      <!-- 右侧登录注册区域 -->
      <div class="tab-container">
        <!-- 选项卡 -->
        <div class="tab" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</div>
        <div class="tab" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</div>
      </div>
      <div class="form-container">
        <!-- 登录表单 -->
        <div v-if="activeTab === 'login'">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名" v-model="loginForm.username">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码" v-model="loginForm.password">
          </div>
          <div class="form-group from-group-row">
            <div class="remember-me">
              <input type="checkbox" id="remember-me" v-model="loginForm.rememberMe">
              <label for="remember-me">记住我</label>
            </div>
            <a href="#" class="forgot-password-link">忘记密码？</a>
          </div>
          <div class="form-group">
            <button class="login-button" @click="handleLogin">登录</button>
          </div>
        </div>
        <!-- 注册表单 -->
        <div v-if="activeTab === 'register'">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名" v-model="registerForm.username">
          </div>
          <div class="form-group">
            <label for="email">电子邮件</label>
            <input type="email" id="email" placeholder="请输入电子邮件" v-model="registerForm.email">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码" v-model="registerForm.password">
          </div>
          <div class="form-group">
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" placeholder="请再次输入密码" v-model="registerForm.confirmPassword">
          </div>
          <div class="form-group">
            <button class="register-button" @click="handleRegister">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const activeTab = ref('login')
const loginForm = reactive({
  username: '',
  password: '',
  rememberMe: false
})
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})
</script>

<style scoped>
.login-register-container {
  display: flex;
  width: 1080px;
}

.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-register-form-container {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.tab-container {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  font-size: 20px;
}

.tab.active {
  background-color: #ccc;
  border-bottom: 1px solid #fff;
}

.form-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}
.from-group-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.remember-me{
  display: flex;
  justify-content: center;
  align-content: center;
  
}
#remember-me {
  vertical-align: middle;
}

label {
  display: block;
  margin-bottom: 5px; 
}
label[for="remember-me"] {
  font-size: 14px;
  margin-bottom: 0px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
}

input[type="checkbox"] {
  margin-right: 10px;
}

.forgot-password-link {
  margin-left: 10px;
  text-decoration: none;
}

.login-button,
.register-button {
  width: 100%;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.login-button:hover,
.register-button:hover {
  background-color: #3e8e41;
}</style>